<%--
  Created by IntelliJ IDEA.
  User: Kirito
  Date: 2022/3/8
  Time: 15:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>点名</title>
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="/js/jquery.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
    <h1 class="text-center">点名</h1>
    <form action="/attendance/check" method="post">

        <div>
            <label>班级</label>
            <select class="form-control" name="rcClass.id">
                <option>---选择班级---</option>
            </select>
        </div>
        <div>
            <label>学院</label>
            <input class="form-control" name="college" type="text" readonly type="text">
        </div>
        <div>
            <label>教师</label>
            <input class="form-control" name="teacherName" type="text" readonly type="text">
        </div>
        <div>
            <label>应到人数</label>
            <input class="form-control"  name="studentNum" readonly type="text">
        </div>
        <div>
            <label>缺勤人数</label>
            <input class="form-control" name="absencePersonNum" type="text" value="0">
        </div>
        <div>
            <label>实到人数</label>
            <input class="form-control" name="attendancePersonNum" type="text" readonly type="text">
        </div>
        <div>
            <label>点名人</label>
            <select class="form-control" name="rcUser.id"></select>
        </div>



        <div class="form-group form-group-sm">
            <label>备注</label>
            <textarea class="form-control" name="remark" placeholder="填写缺勤学生姓名(使用逗号分割)"></textarea>
        </div>
        <button class="btn btn-primary"> 提交</button>
    </form>
<script>
    var classList=[];//使用全局变量
    $(function () {

        //获取班级信息并显示
        $.get(
            "/rcclass/list",
            function (data) {
                classList=data;
                for (var i =0 ;i<data.length;i++){
                    var option = $("<option></option>");
                    option.val(data[i].id);
                    option.text(data[i].college+" - "+data[i].className)
                    $("select[name='rcClass.id']").append(option)
                }
                     //使用程序模拟器修改了班级
                $("select[name='rcClass.id']").change();
            }
        )
    })
        //当重新选择了点名班级时，动态的修改学院，班级名称，教师应道人数
    $("select[name='rcClass.id']").change(function () {
        var classId=$(this).val();
        for (var i in classList){
            if (classId==classList[i].id){

                $("[name=college]").val(classList[i].college);
                $("[name=teacherName]").val(classList[i].teacherName);
                $("[name=studentNum]").val(classList[i].studentNum);
                $("[name=attendancePersonNum]").val(classList[i].studentNum);
                break;
            }
        }
    })
    //给缺勤人数框绑定keypress事件，当修改缺勤人数时自动计算出勤人数=学生数-缺勤人数
    $("[name=absencePersonNum]").on('keyup',function () {
        var a=$("[name=studentNum]").val();//学生数
        var b=$(this).val();//缺勤人数
        var c=a-b;
        $("[name=attendancePersonNum]").val(c);
    })
$.get(
    "/user/list",
    function (data) {
        for (var i=0;i<data.length;i++){
            var  option=$("<option></option>");
            option.text(data[i].name)
            option.val(data[i].id)
            $("select[name='rcUser.id']").append(option)
        }
    }
)

</script>

</div>
</body>
</html>
